<template>
  <div>
    <div class="box_bg">
      <ScaleBox class="bg" :width="1024" :height="768" bgc="#00060f" :delay="100" :isFlat="false">
        <div class="main-container chemicalProcess">
          <img @click="goBack" class="back" src="../../../assets/back.png" alt="" />

          <div class="center_">
            <!-- <img class="nav_title" src="../../../assets/title.png" alt="" /> -->
            <div class="nav_title">执行任务设置</div>
          </div>
          <div class="center_">
            <div class="boxs">
              <div class="add" @click="getAdd">添加+</div>
              <div class="list_head">
                <div>时间</div>
                <div>调控属性</div>
                <div>调控开关</div>
                <div>执行条件</div>
                <div>状态</div>
                <div>操作</div>
              </div>
              <div class="list_boxs">
                <div class="list_content" v-for="item in ghTaskList" :key="item.id">
                  <div class="content_">{{ item.timeName }}</div>

                  <!-- <el-select @change="saveGhTask(item)" v-model="item.timeId" placeholder="请选择">
                    <el-option v-for="item in ghTimeList" :key="item.id" :label="`${item.startTime}~${item.endTime}(${item.remark})`" :value="item.id"> </el-option>
                  </el-select> -->
                  <!-- <div @click="open(0, item)" class="content_">{{ item.isGradient == 0 ? '否' : '是' }}</div> -->
                  <!-- <div class="content_">{{ item.timeName }}</div> -->
                  <el-select @change="saveGhTask(item)" v-model="item.groupId" placeholder="请选择">
                    <el-option v-for="item in ghAttrSettings" :key="item.id" :label="item.name" :value="item.id"> </el-option>
                  </el-select>
                  <el-select @change="saveGhTask(item)" multiple v-model="item.switchList" placeholder="请选择">
                    <el-option v-for="item in ghSwitchs" :key="item.id" :label="`${item.deviceName}(${item.cmdName})`" :value="item.id"> </el-option>
                  </el-select>
                  <div class="content" v-html="item.settingNames"></div>
                  <!-- <div @click="open(1, item)" class="content_">{{ item.isExecute == 0 ? '非最迟时间' : '最迟时间' }}</div> -->
                  <div class="operation">
                    <div :class="item.status == 0 ? 'close' : 'open'" @click="openOrClose(item.id)">{{ item.status == 0 ? '禁用' : '启用' }}</div>
                  </div>
                  <div class="operation">
                    <div @click="openDialog(item)" class="edit">编辑</div>
                    <div @click="del(item.id)" class="del">删除</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div v-if="dialogVisible" class="answer_box">
            <div @click="dialogVisible = false" class="del">
              <img style="width: 40px" src="../../../assets/del.png" alt="" />
            </div>
            <div class="videoBox">
              <div class="aic">
                是否梯度调控:
                <el-switch v-model="editInfo.isGradient" active-color="#13ce66" inactive-color="#ff4949" :active-value="1" :inactive-value="0"> </el-switch>
                <!-- <div class="content_box" :class="editInfo.isGradient == item.value ? 'active' : ''" v-for="item in controlList" :key="item">{{ item.name }}</div> -->
              </div>
              <div class="aic">
                是否气象调控:
                <el-switch v-model="editInfo.isWeatherControl" active-color="#13ce66" inactive-color="#ff4949" :active-value="1" :inactive-value="0"> </el-switch>
                <!-- <div class="content_box" :class="editInfo.isGradient == item.value ? 'active' : ''" v-for="item in controlList" :key="item">{{ item.name }}</div> -->
              </div>
              <div class="aic">
                是否根据最迟时间执行开关:
                <el-switch v-model="editInfo.isExecute" active-color="#13ce66" inactive-color="#ff4949" :active-value="1" :inactive-value="0"> </el-switch>
                <!-- <div class="content_box" :class="editInfo.isGradient == item.value ? 'active' : ''" v-for="item in controlList" :key="item">{{ item.name }}</div> -->
              </div>
              <div v-if="editInfo.isWeatherControl == 1" class="aic">
                每降多少数值，提前的时间:
                <el-input style="width: 250px" v-model="editInfo.minute" placeholder="请输入时长"> </el-input>
                /分
              </div>
              <div v-if="editInfo.isWeatherControl == 1" class="aic">
                正常时间:
                <el-input style="width: 250px" v-model="editInfo.normalTime" placeholder="请输入正常时间"> </el-input>
                /分
              </div>
              <div v-if="editInfo.isWeatherControl == 1" class="aic">
                正常数值:
                <el-input style="width: 250px" v-model="editInfo.normalValue" placeholder="请输入正常数值"> </el-input>
              </div>
              <div v-if="editInfo.isGradient == 1" class="aic">
                梯度调控时长:
                <el-input style="width: 250px" v-model="editInfo.gradientSecond" placeholder="请输入调控时长"> </el-input>
                /秒
              </div>
              <div v-if="editInfo.isGradient == 1" class="aic">
                梯度调控属性:
                <el-select style="width: 400px" v-model="editInfo.gradientGroupId" placeholder="请选择">
                  <el-option v-for="item in ghAttrSettings" :key="item.id" :label="item.name" :value="item.id"> </el-option>
                </el-select>
              </div>
              <div v-if="editInfo.isGradient == 1" class="aic">
                梯度调控开关:
                <el-select multiple v-model="editInfo.gradientSwitchIds" placeholder="请选择">
                  <el-option v-for="item in ghSwitchs" :key="item.id" :label="`${item.deviceName}(${item.cmdName})`" :value="item.id"> </el-option>
                </el-select>
              </div>
              <div class="center_">
                <div @click="saveGhTask_tk" class="button">确认</div>
              </div>
            </div>
          </div>
        </div>
      </ScaleBox>
    </div>
  </div>
</template>
<script>
// import store from '@/store'
import { getGhTaskList, getGhSwitchs, getGhAttrs, saveGhTask, getGhTimes, getGhTask, delGhTask, getGhAttrGroups, openOrClose } from '@/api/system'

import ScaleBox from 'vue2-scale-box'
import moment from 'moment'
import { number } from 'echarts'
export default {
  components: {
    ScaleBox
  },
  data() {
    return {
      indexc: 0,

      ghTaskList: [],
      ghSwitchs: [],
      ghAttrs: [],
      ghTimeList: [],
      dialogVisible: false,
      editInfo: {},
      controlList: [
        { name: '是', value: 1 },
        { name: '否', value: 0 }
      ],
      ghAttrSettings: [],
      timeId: ''
    }
  },
  mounted() {
    this.timeId = this.$route.query.timeId
    this.getGhTaskList()
    this.getGhSwitchs()
    this.getGhAttrs()
    this.getGhTimes()
    this.getGhAttrGroups()
  },
  beforeDestroy() {},
  methods: {
    getGhAttrGroups() {
      getGhAttrGroups({ id: this.timeId }).then(res => {
        if (res.code == 200) {
          this.ghAttrSettings = res.data
        }
      })
    },
    getAdd() {
      let form = { gradientSecond: '', gradientSettingIds: '', gradientSwitchIds: '', isExecute: 0, isGradient: 0, settingIds: '', switchIds: '', timeId: this.timeId }
      saveGhTask(form).then(res => {
        this.getGhTaskList()
      })
    },
    openOrClose(id) {
      openOrClose({ id: id }).then(res => {
        console.log()
        this.$message({
          message: res.msg,
          type: 'success'
        })

        // this.getGhTimeList()
        this.getGhTaskList()
      })
    },
    del(id) {
      delGhTask({ id: id }).then(res => {
        console.log()
        this.$message({
          message: res.msg,
          type: 'success'
        })

        // this.getGhTimeList()
        this.getGhTaskList()
      })
    },
    openDialog(val) {
      this.dialogVisible = true
      getGhTask({ id: val.id }).then(res => {
        // if (res.data.gradientSettingIds) {
        //   res.data.gradientSettingIds = res.data.gradientSettingIds.split(',')
        //   let arr = res.data.gradientSettingIds.map(item => Number(item))
        //   res.data.gradientSettingIds = arr
        // }
        if (res.data.gradientSwitchIds) {
          res.data.gradientSwitchIds = res.data.gradientSwitchIds.split(',')
          let arr = res.data.gradientSwitchIds.map(item => Number(item))
          res.data.gradientSwitchIds = arr
        }
        this.editInfo = res.data
      })
    },
    saveGhTask(val) {
      if (val.groupId) {
        this.ghAttrSettings.map(item => {
          if (item.id == val.groupId) {
            let arr = []
            item.list.map(i => {
              arr.push(i.id)
            })
            val.settingIds = arr.join(',')
          }
        })
      }
      val.switchIds = val.switchList.join(',')
      saveGhTask(val).then(res => {
        if (res.code == 200) {
          this.$message({
            type: 'success',
            message: res.msg
          })
          this.dialogVisible = false
          this.getGhTaskList()
        }
      })
    },
    saveGhTask_tk() {
      if (this.editInfo.gradientGroupId) {
        this.ghAttrSettings.map(item => {
          if (item.id == this.editInfo.gradientGroupId) {
            let arr = []
            item.list.map(i => {
              arr.push(i.id)
            })
            this.editInfo.gradientSettingIds = arr.join(',')
          }
        })
      }
      this.editInfo.gradientSwitchIds = this.editInfo.gradientSwitchIds.join(',')
      // this.editInfo.gradientSettingIds = this.editInfo.gradientSettingIds.join(',')
      saveGhTask(this.editInfo).then(res => {
        if (res.code == 200) {
          this.$message({
            type: 'success',
            message: res.msg
          })
          this.dialogVisible = false
          this.getGhTaskList()
        }
      })
    },
    getGhTimes() {
      getGhTimes().then(res => {
        if (res.code == 200) {
          this.ghTimeList = res.data
        }
      })
    },
    getGhAttrs() {
      getGhAttrs().then(res => {
        if (res.code == 200) {
          this.ghAttrs = res.data
        }
      })
    },
    getGhSwitchs() {
      getGhSwitchs().then(res => {
        if (res.code == 200) {
          this.ghSwitchs = res.data
        }
      })
    },
    getGhTaskList() {
      let form = {
        pageSize: 200,
        timeId: this.timeId
      }
      getGhTaskList(form).then(res => {
        if (res.code == 200) {
          res.data.map(item => {
            if (item.switchIds) {
              item.switchIds = item.switchIds.split(',')
              let arr = item.switchIds.map(item => Number(item))
              console.log(arr)
              item.switchList = arr
            }
            // if (item.settingIds) {
            //   item.settingIds = item.settingIds.split(',')
            //   let arr = item.settingIds.map(item => Number(item))
            //   console.log(arr)
            //   item.settingList = arr
            // }
            if (item.settingNames) {
              item.settingNames = item.settingNames.replace(',', '<br>')
            }
          })
          this.ghTaskList = res.data
        }
      })
    },
    goBack() {
      this.$router.go(-1)
    },
    getIndx(val) {
      this.$router.push({
        path: val
      })
    }
  }
}
</script>
<style>
.DateStyle {
  scale: 1.5;
  /* width: 670px;
  height: 580px; */
}
.timerPicer {
  scale: 2;
}
.el-select-dropdown {
  scale: 1.5;
}

/* .DateStyle .el-picker-panel__content {
  width: 95%;
  height: 500px;
}
.DateStyle .el-date-table {
  height: 100%;
}
.DateStyle .el-date-table td {
  height: 60px;
  font-size: 20px;
}
.DateStyle .el-date-table tr {
  height: 60px;
  font-size: 23px;
}
.timerPicer .el-popper {
  width: 700px;
  height: 400px;
}
.el-time-spinner {
  height: 350px;
}
.el-time-spinner__wrapper {
  max-height: 350px;
}
.el-time-spinner__item {
  height: 40px;
  font-size: 20px;
}
.el-time-panel__content::before {
  top: 27%;
}
.el-time-panel__content::after {
  top: 27%;
} */
</style>
<style lang="less" scoped>
.operation {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.del {
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffac4c;
  font-family: 'MyCustomFont', sans-serif;
}
.edit {
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #448dfa;
  font-family: 'MyCustomFont', sans-serif;
}
.close {
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: red;
  font-family: 'MyCustomFont', sans-serif;
}
.open {
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(89, 221, 89);
  font-family: 'MyCustomFont', sans-serif;
}
.device {
  position: absolute;
  top: 133px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow-y: scroll;
  height: 560px;
  .deviceBox {
    margin: 10px;
    width: 466px;
    height: 265px;
    background: #19253a;
    border-radius: 27px;
    position: relative;
    .status_box {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      position: absolute;
      width: 370px;
      left: 60px;
      bottom: 52px;
      .status_img {
        width: 92px;
        height: 92px;
        cursor: pointer;
      }
    }
    .deviceName {
      position: absolute;
      top: 26px;
      left: 29px;
      font-weight: 600;

      font-size: 24px;
      color: #f9fafa;
    }
    .deviceStatus {
      position: absolute;
      top: 34px;
      right: 29px;
      font-weight: 600;
      font-size: 24px;
      color: #f53325;
    }
  }
}

.back {
  width: 60px;
  height: 60px;
  cursor: pointer;
  position: absolute;
  top: 30px;
  left: 41px;
}
// /deep/.DateStyle {
//   width: 700px;
// }
// /deep/ .el-date-picker {
//   width: 700px;
// }

/* 自定义整个滚动条 */
::-webkit-scrollbar {
  width: 0px; /* 设置滚动条的宽度 */
}

/* 自定义滚动条轨道 */
::-webkit-scrollbar-track {
  background: transparent; /* 设置轨道的背景颜色 */
}

/* 自定义滚动条的滑块（thumb） */
::-webkit-scrollbar-thumb {
  background: #cceaf8; /* 设置滑块的背景颜色 */
  height: 12px;
}

/* 当滑块悬停或活动时，可以添加更多样式 */
::-webkit-scrollbar-thumb:hover {
  background: #555; /* 设置滑块在悬停状态下的背景颜色 */
}
/deep/.el-input-group__append {
  background-color: #387dff;
  color: #ffffff;
  cursor: pointer;
}

/deep/ .el-input__inner {
  font-weight: bold;
  color: #fff;
  text-align: center;
  font-style: normal;
  border: none;
  border-radius: 9px;
  background: transparent;
  border-radius: 20px 0 0 20px;
  font-size: 14px;
}
/deep/.el-tag.el-tag--info {
  background: transparent;
  border: none !important;
  font-size: 15px;
  color: #fff;
}
/deep/.el-range-input {
  background: transparent;
}
/deep/.el-range-separator {
  color: #ffffff;
}

.boxs {
  position: absolute;
  top: 115px;
  width: 957px;
  height: 611px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(11.02941176470588px);
  font-weight: 500;
  font-size: 24px;
  color: #ffffff;
  padding: 40px;
  .list_head {
    display: grid;
    grid-template-columns: 0.7fr 1.5fr 1.5fr 1.2fr 0.5fr 0.5fr;
    text-align: center;
    padding-bottom: 15px;
    border-bottom: 2px solid #ffffff;
    font-size: 17px;
  }
  .list_boxs {
    height: 500px;
    overflow-y: scroll;
  }
  .list_content {
    display: grid;

    grid-template-columns: 0.7fr 1.5fr 1.5fr 1.2fr 0.5fr 0.5fr;
    min-height: 50px;
    line-height: 35px;
    text-align: center;
    font-size: 16px;
    font-weight: normal;
    color: #f9fafa;
    border-bottom: 1px solid #979797;
    .content {
      text-align: left;
    }
    .content_ {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
.aic {
  display: flex;
  align-items: center;
  font-weight: 500;
  font-size: 20px;
  color: #ffffff;
  margin: 20px;
  white-space: nowrap;
}
.bottom {
  position: absolute;
  bottom: 20px;
  display: flex;
  justify-content: space-around;
  width: 957px;
}
.bg {
  background: url('../../../assets/bg_.png') no-repeat center center;
  // width: 100vw;
  height: 100vh;
  width: 100vw;
  // background-color: #05032e;
  /*把背景图片放大到适合元素容器的尺寸，图片比例不变*/
  background-size: cover;
}
.box_bg {
  background-color: #011e7b !important;

  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
}
.center_ {
  display: flex;
  justify-content: center;
  .nav_title {
    font-family: 'MyCustomFont', sans-serif;
    display: flex;
    justify-content: center;
    // background: url('../assets/title.png') no-repeat center center;
    position: absolute;
    top: 20px;
    font-size: 42px;
    color: #ffffff;
    line-height: 58px;
    text-align: justify;
    font-style: normal;
    background: linear-gradient(90deg, #ffffff 0%, #0771ff 97%, #006dff 100%);
    -webkit-background-clip: text;
    color: transparent;

    .nav_t {
      font-weight: bolder;
      font-size: 34px;
      color: #3de6ff;
      line-height: 48px;
      text-align: center;
      font-style: normal;
      background: linear-gradient(90deg, #ffffff 0%, #02c2cb 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
}
.answer_box {
  width: 800px;
  min-height: 200px;
  background: url('../../../assets/bg_.png') no-repeat center center;
  border-radius: 15px;
  // border-image: linear-gradient(177deg, rgba(71, 255, 255, 1), rgba(0, 177, 255, 0.33)) 2 2;
  position: absolute;
  left: 10%;
  top: 20%;
  z-index: 999;
  .videoBox {
    width: 100%;
    display: flex;
    flex-flow: column;
    justify-content: center;
    // align-items: center;
    .video_box {
      width: 100%;
      height: 90%;
    }
  }
  .imgBox {
    width: 90%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    margin-top: 30px;
    overflow-y: scroll;

    .c_img {
      width: 220px;
    }
  }
  .del {
    position: absolute;
    right: -10px;
    top: -10px;
    cursor: pointer;
  }
  .kf {
    width: 104px;
    height: 100px;
    margin-left: 30px;
  }
  .answer {
    width: 1065px;
    height: 398px;
    margin-left: 20px;
    background: #1075e3;
    border-radius: 54px;
    padding: 30px;
    font-size: 27px;
    color: #ffffff;
    text-indent: 1em;
    animation: reveal 3s infinite step-end;
    overflow-y: scroll;
  }
  @keyframes reveal {
    to {
      width: 100%; /* 动画结束时，容器宽度增加到100%，从而显示所有文字 */
      height: 4.8em; /*· 根据行高和需要显示的行数调整高度 */
    }
  }
  .question {
    margin: 40px;
    min-width: 340px;
    max-width: 600px;
    min-height: 77px;
    background: #1edbe8;
    border-radius: 54px;
    text-align: left;
    line-height: 67px;
    padding-left: 10px;
    padding-right: 40px;
    font-size: 27px;
    color: #ffffff;
    text-indent: 1em;
  }
}
.content_box {
  min-width: 100px;
  padding: 20px;
  height: 36px;
  border-radius: 8px;
  font-weight: 500;
  font-size: 20px;
  background: #2a3549;
  color: #0569ff;
  margin-left: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.active {
  background: #0569ff;
  color: #fff;
}
@font-face {
  font-family: 'MyCustomFont'; /* 定义字体的名称 */
  src: url('../../../assets/tt.ttf') format('truetype'); /* 指定字体文件的路径和格式 */
}
.button {
  width: 150px;
  height: 48px;
  background: #006dff;
  border-radius: 40px;
  font-family: MyCustomFont;
  font-weight: 500;
  font-size: 24px;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.add {
  position: absolute;
  right: 20px;
  top: 10px;
  font-family: 'MyCustomFont', sans-serif;
}
</style>
